<template>
    <div>
        <p>已读</p>
        <ul>
           <li v-for="(item,index) in currentPageDate" :key="index">{{item.title}} <button @click="add(index)">删除</button><button @click="addUnRead(index)">还原未读</button></li>
       </ul>
       <button @click="all">删除全部</button> <button @click="allread_unread">全部未读</button>
       <div class="page">
           <ul>
                <li v-for="(item,index) in total" :key="index" @click="Pagechange(item)">{{item}}</li>
            </ul>
       </div>
    </div>
</template>

<script>
import {mapState, mapMutations} from 'vuex'
    export default {
        data() {
            return {
                //总页数
                total:1,
                //当前页数
                currentpage:1,
                //每页显示条数
                pageSize:2,
                //当前页显示的内容
                currentPageDate:[]
            }
        },
        mounted() {
                this.total=Math.ceil(this.read.length/this.pageSize);
                console.log(this.total);
                this.total=this.total==0 ? 1 :this.total
                this.setCurrentpageData()
        },
        methods: {
            ...mapMutations(['addrecycle','allrecycle','read_unread','allread_UNread']),
            add(index){
                console.log(index);
                this.addrecycle(index)
                this.setCurrentpageData()
            },
            all(){
                this.allrecycle()
                this.setCurrentpageData()
            },
            addUnRead(index){
                this.read_unread(index)
                this.setCurrentpageData()
            },
            allread_unread(){
                this.allread_UNread()
                this.setCurrentpageData()
            },
            setCurrentpageData(){
                let begin = (this.currentpage-1) * this.pageSize;
                let end =this.currentpage * this.pageSize;
                this.currentPageDate=this.read.slice(begin,end)
            },
            //点击每页进行换页
                Pagechange(item){
                console.log(item);
                this.currentpage=item
                this.setCurrentpageData()
            },
        },
        computed:{
            ...mapState(['read'])
        }
    
    }
</script>

<style lang="scss" scoped>
ul{
    list-style: none;
}
.page{
    width: 100%;
    height: 50px;
   
    overflow: hidden;
    ul{
      list-style: none;
     margin-top: 15px;
      li{
        float: left;
        display: inline-block;
        width: 30px;
        background: skyblue;
        margin-left: 20px;
        text-align: center;
        border-radius: 5px;
      }
    }
  }
</style>